<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#cantain{
				margin: 10px auto;
				width: 50%;
				height: 500px;
			}
			#can{
				border: 1px solid aquamarine;
				/*position: relative;
				top: 20%;*/
			}
		</style>
		
			<script type="text/javascript">
		/*	window.onload=function (){
				var canvas = document.getElementById("can");
				var context;
				var img = new Image();
				img.src="img/HBuilder.png";
				context = canvas.getContext("2d");
				context.drawImage(img,0,0,canvas.width,canvas.height);	
			}
			*/
			function enlarge(ev){
			 	ev = ev || window.event;
			 	/*x.y为鼠标的位置*/
			 	var x = ev.offsetX;
			 	var y = ev.offsetY;
			 	
			 	/*画布设置*/
			 	var canvas = document.getElementById("can");
				var context;
				var img = new Image();
				img.src="img/HBuilder.png";
				context = canvas.getContext("2d");
				context.drawImage(img,x,y,50,50,0,0,canvas.width,canvas.height);
			 }
		</script>
	</head>
	<body>
	<h1> canvas.html</h1>
	<div id="cantain">
		<img src="img/HBuilder.png" alt=""  width="200px" height="200px" border="1px" onmousemove="enlarge(window.event)"/>
		<canvas id="can" width="200px" height="200px"></canvas>
	</div>
	

	</body>
	
</html>
